<template>
  <el-container class="app">
    <el-aside width="180px">
      <app-tree @getInfo="goApp"></app-tree>
    </el-aside>
    <el-main>
      <component v-if="componentKey!=''" v-bind:is="componentKey" :id="elId"></component>
      <div v-else></div>
    </el-main>
  </el-container>
</template>
<script>
import appTree from "./app-tree.vue";
import appContent from "./app-content.vue";
export default {
  components: {
    appTree,
    appContent
  },
  data() {
    return {
      elId: "",
      elType: ""
    };
  },
  computed: {
    componentKey: function() {
      if (this.elType == "app") return appContent;
      return "";
    }
  },
  methods: {
    goApp(elId, type) {
      this.elId = elId;
      this.elType = type;
      console.debug("getId= " + elId);
    }
  }
};
</script>
